<template>
	<view class="agreement">
		<header :style="'padding-top: '+height.top+'px;height: '+(44+height.top)+'px;'">
			<image :style="'height: '+(44+height.top)+'px;'" src="../../../static/home/4.png" mode="aspectFill"></image>
			<view :style="'height: '+height.height+'px;top: '+height.top+';'">
				<u-icon @click="retreat(1)" name="arrow-left" color="#272635" size="32"></u-icon>
				<span>{{title}}</span>
			</view>
		</header>
		<main>
			<u-parse :content="html"></u-parse>
		</main>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				html: '',
				title: '',
				height: {},
			};
		},
		onLoad(res) {
			this.height = uni.getStorageSync('header')
			if (res.title) {
				this.title = res.title
				this.apifun.unirequest('/api/index/getConfigInfo', 'post', {
					field: res.type
				}, (res) => {
					this.html = res.data
					console.log(this.html)
				}, true)
			}
		},
		methods: {
			retreat: (delta) => {
				uni.navigateBack({
					delta,
				});
			},
		}
	}
</script>

<style lang="scss">
	.agreement {
		&>header {
			width: 750rpx;
			margin: 0 auto;
			position: sticky;
			top: 0;
			z-index: 999;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			&>view {
				width: 690rpx;
				z-index: 999;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				&>span {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 18px;
					font-weight: bold;
				}

				&>.u-icon {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&>image {
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 998;
				@include cssimg;
			}
		}

		&>main {
			width: 100%;
			padding: 44rpx 40rpx 40rpx;
			box-sizing: border-box;
		}
	}
</style>